<template>
    <div class="ant-pro-pages-list-projects-cardList">
      <a-list :loading="loading" :data-source="data" :grid="{ gutter: 24, column:5 }" :pagination="pagination">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-card class="ant-pro-pages-list-projects-card" hoverable>
            <img slot="cover" :src="vuex_src+ item.case_src" :alt="item.case_name" />
			<template slot="actions" class="ant-card-actions">
			  <a-icon key="delete" type="delete" @click="del(item.id)" />
			  <a-icon key="edit" type="edit" @click="edit(item)" />
			</template>
            <a-card-meta :title="item.case_name">
              <template slot="description">
                <span>{{ item.case_dec }}</span>
              </template>
            </a-card-meta>
            <div class="cardItemContent">
              <span>创建：{{ item.creat_time | fromNow }}</span>
             <div class="avatarList">
				 更新：{{ item.update_time | fromNow }}
               <!-- <avatar-list size="small" :max-length="2">
                  <avatar-list-item
                    v-for="(member, i) in item.members"
                    :key="`${item.id}-avatar-${i}`"
                    :src="member.avatar"
                    :tips="member.name"
                  />
                </avatar-list> -->
              </div>
            </div>
          </a-card>
        </a-list-item>
        <a-list-item @click="add">
          <a-card class="ant-pro-pages-list-projects-card" hoverable>
            <img slot="cover" src="@/assets/add.png" alt="添加案例" />
          </a-card>
        </a-list-item>
      </a-list>
    </div>
</template>

<script>
import moment from 'moment'
import {caseList,caseDelete} from  '@/api/case.js'
import addCase from './modules/addCase.vue'
export default {
  components: {
  },
  data () {
    return {
      data: [],
      form: this.$form.createForm(this),
      loading: true,
	  pagination: {
	  	showSizeChanger: true,
	  	pageSizeOptions: ['10', '20', '50'],
	  	current:1,
	  	pageSize: 10,
	  	total:0,
	  	onChange:(current, size)=>{
	  		this.pagination.current = current;
	  		this.pagination.pageSize = size;
	  		this.getList()
	  	},
	  	onShowSizeChange:(current, size)=>{
	  		this.pagination.current = current;
	  		this.pagination.pageSize = size;
	  		this.getList()
	  	}
	  },
    }
  },
  filters: {
    fromNow (date) {
      return moment(date).fromNow()
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
   add () {
   		  let that = this;
     this.$dialog(addCase,
       // component props
       {
         record: {},
         on: {
           ok () {
   				  that.getList()
             console.log('ok 回调')
           },
           cancel () {
             console.log('cancel 回调')
           },
           close () {
             console.log('modal close 回调')
           }
         }
       },
       // modal props
       {
         title: '新增',
         width: 700,
         centered: true,
         maskClosable: false
       })
   },
   edit (record) {
   		  let that = this;
     this.$dialog(addCase,
       // component props
       {
         record,
         on: {
           ok () {
   				   that.getList()
             console.log('ok 回调')
           },
           cancel () {
             console.log('cancel 回调')
           },
           close () {
             console.log('modal close 回调')
           }
         }
       },
       // modal props
       {
         title: '编辑',
         width: 700,
         centered: true,
         maskClosable: false
       })
   },
   del(id){
   	caseDelete({id:id}).then(res=>{
   		this.getList()
   	})
   },
    getList () {
		caseList({page:this.pagination.current,size:this.pagination.pageSize}).then(res=>{
			this.data=res.data.list;
			this.loading = false;
			this.pagination.total = res.data.total
		})
    }
  }
}
</script>

<style lang="less" scoped>
.ant-pro-components-tag-select {
  /deep/ .ant-pro-tag-select .ant-tag {
    margin-right: 24px;
    padding: 0 8px;
    font-size: 14px;
  }
}
.ant-pro-pages-list-projects-cardList {
  margin-top: 24px;

  /deep/ .ant-card-meta-title {
    margin-bottom: 4px;
  }

  /deep/ .ant-card-meta-description {
    height: 44px;
    overflow: hidden;
    line-height: 22px;
  }

  .cardItemContent {
    display: flex;
    height: 20px;
    margin-top: 16px;
    margin-bottom: -4px;
    line-height: 20px;

    > span {
      flex: 1 1;
      color: rgba(0,0,0,.45);
      font-size: 12px;
    }

    /deep/ .ant-pro-avatar-list {
      flex: 0 1 auto;
    }
  }
}
</style>
